<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="!token" class="force-login-wrap">
			<!-- <image class="logo-bg" :src="`${A_VUE_APP_RESOURCES_URL}/images/logo_bg.png`" mode="aspectFill"></image> -->
			<view class="force-login__content y-f">
				<open-data class="user-avatar" type="userAvatarUrl"></open-data>
				<open-data class="user-name" type="userNickName"></open-data>
				<view class="login-notice">为了提供更优质的服务，请先登录</view>
				<button class="cu-btn author-btn transparent-button" v-if="!agree" @click="checkAgree">
					手机号快捷登录
				</button>
				<button class="cu-btn author-btn" open-type="getPhoneNumber"
					@getphonenumber="phoneLogin" v-else>手机号快捷登录</button>
				<!-- <button class="cu-btn author-btn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">授权并查看</button>
		<button class="cu-btn author-btn" v-else @getuserinfo="getUserInfoBtn" open-type="getUserInfo">授权并查看</button> -->
				<button class="cu-btn close-btn" @tap="back">暂不登录</button>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="force-login-wrap">
			<!-- <image class="logo-bg" :src="`${A_VUE_APP_RESOURCES_URL}/images/logo_bg.png`" mode="aspectFill"></image> -->
			<view class="force-login__content y-f">
				<view class="login-notice">为了提供更优质的服务，请先登录</view>
				<button class="cu-btn author-btn" @tap="toLogin">去登录</button>
			</view>
		</view>
		<!-- #endif -->
		<view class="quick-title" @click="handleClickAgree">
			<view class="icon-view" :class="{ 'icon-agree': agree }">
				<!-- <u-icon name="checkmark-circle-fill" v-if="agree"	size="44" color="#3383fe"></u-icon> -->
				<icon type="success" size="18" color="#3383fe" class="checked-icon" v-if="agree" />
			</view>
			<view class="agree-text-view">
				我已阅读并同意
				<text class="name-text" @tap.stop.prevent="handleClick('protocol')">《用户服务协议》</text>
				和
				<text class="name-text" @tap.stop.prevent="handleClick('policy')">《隐私政策》</text>
			</view>
		</view>
		<zero-privacy color="#3383FE" :onNeed="false" :hideTabBar="false"></zero-privacy>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		wxappAuth,
		getUser,
		getUserInfo
	} from '@/api/user'
	import {
		login,
		authorize,
		getProvider
	} from '@/utils'
	import dayjs from 'dayjs'
	import cookie from '@/utils/store/cookie'
	import store from '@/store'

	// 公众号登录
	import {
		auth
	} from '@/libs/wechat.js'

	export default {
		data() {
			return {
				authorize: false,
				canIUseGetUserProfile: false,
				agree: false
			}
		},
		computed: {
			...mapState(['isAuthorization', '$deviceType', 'token']),
		},
		onLoad() {
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
			// // 先校验用户是否授权，如果没有授权，显示授权按钮
		},
		onHide() {
			this.updateAuthorizationPage(false)
			this.changeAuthorization(false)
		},
		onUnload() {
			this.updateAuthorizationPage(false)
			this.changeAuthorization(false)
		},
		methods: {
			...mapActions(['changeAuthorization', 'setUserInfo']),
			...mapMutations(['updateAuthorizationPage']),
			checkAgree() {
				if (!this.agree) {
					uni.showToast({
						title: '请阅读并同意《用户服务协议》和《隐私政策》',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				return true;
			},
			handleClick(type) {
				let path=""
				if(type==='protocol'){
					path="/pages/about/protocol"
				}else if(type==='policy'){
					path="/pages/about/policy"
				}
				uni.navigateTo({
					url: path
				});
			},
			handleClickAgree() {
				this.agree = !this.agree;
			},
			toLogin() {
				if(!this.checkAgree()) return ;
				this.$yrouter.push({
					path: '/pages/user/Login/index',
					query: {},
				})
			},
			back() {
				this.$yrouter.switchTab({
					path: '/pages/home/index',
					query: {},
				})
			},
			getUserInfoBtn(data) {
				console.log(data)
				console.log('getUserInfoBtn')
				if (data.detail.errMsg == 'getUserInfo:fail auth deny') {
					uni.showToast({
						title: '取消授权',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				uni.showLoading({
					title: '登录中',
				})
				login()
					.then(e => {
						uni.hideLoading()
						console.log('重定向')
						this.$yrouter.reLaunch({
							path: cookie.get('redirect').replace(/\ /g, ''),
						})
					})
					.catch(error => {
						uni.hideLoading()
						console.log(error)
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000,
						})
					})
			},
			// 申请获取用户信息
			getUserInfoProfile(data) {
				console.log('getUserInfoProfile')
				wx.getUserProfile({
					lang: 'zh_CN',
					desc: '需要获取您的信息用来展示',
					success: res => {
						console.log('用户信息', res)
						uni.showLoading({
							title: '登录中',
						})
						login(res)
							.then(e => {
								console.log('重定向')
								this.$yrouter.reLaunch({
									path: cookie.get('redirect').replace(/\ /g, ''),
								})
							})
							.catch(error => {
								console.log(error)
								uni.showToast({
									title: error,
									icon: 'none',
									duration: 2000,
								})
							})
					},
				})
			},
			// 微信用户手机号登录
			phoneLogin(e) {
				console.log('用户微信手机号登录', e)
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					console.log(e.mp.detail)
					getProvider()
						.then(provider => {
							console.log('当前的环境商', provider)
							if (!provider) {
								reject()
							}
							// uni登录
							uni.login({
								provider: provider,
								success: async loginRes => {
									console.log(loginRes)
									let code = loginRes.code // 获取开发code
									cookie.set('wxLoginCode', loginRes.code)
									wxappAuth({
											encryptedData: e.mp.detail.encryptedData,
											iv: e.mp.detail.iv,
											code: code,
											spread: cookie.get('spread'),
										})
										.then(res => {
											console.log('登录成功,开始处理登录信息保存，并获取用户详情')
											uni.hideLoading()
											store.commit('login', res.data.token, dayjs(res.data
												.expires_time))
											store.dispatch('userInfo', true)
											getUserInfo()
												.then(user => {
													console.log('获取用户信息成功')
													uni.setStorageSync('uid', user.data.uid)
													store.dispatch('setUserInfo', user.data)
													this.$yrouter.reLaunch({
														path: cookie.get('redirect')
															.replace(/\ /g, ''),
													})
												})
												.catch(error => {
													console.log('获取用户信息失败')
												})
										})
										.catch(error => {
											console.log(error)
											console.log('登录接口调用失败')
										})
								}
							})
						})
						.catch(err => {})
				} else {
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
			},
		},
		mounted() {
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true
				console.log(this.canIUseGetUserProfile)
			}
		},
	}
</script>

<style lang="less">
	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
	}

	.force-login-wrap {
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 11111;
		top: 0;

		.logo-bg {
			width: 640rpx;
			height: 300rpx;
		}

		.force-login__content {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.user-avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-bottom: 40rpx;
			}

			.user-name {
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000;
				margin-bottom: 30rpx;
			}

			.login-notice {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000;
				line-height: 44rpx;
				width: 500rpx;
				text-align: center;
				margin-bottom: 80rpx;
			}

			.author-btn {
				width: 630rpx;
				height: 80rpx;
				background: linear-gradient(to right, #1893ff 0%, #5cabff 100%);
				background: -moz-linear-gradient(to right, #1893ff 0%, #5cabff 100%);
				// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}

			.close-btn {
				width: 630rpx;
				height: 80rpx;
				margin-top: 30rpx;
				border-radius: 40rpx;
				border: 2rpx solid #8d8d8d;
				background: none;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #8d8d8d;
			}
		}
	}

	.quick-title {
		z-index: 22222;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 5%;
		text-align: center;
		line-height: 28upx;
		font-size: 24upx;
		color: #8d8d8d;
		font-weight: 500;

		&-weight {
			font-weight: bold;
			color: #333333;
		}

		&-icon {
			width: 28upx;
			height: 28upx;
			line-height: 28rpx;
			border-radius: 50%;
			margin-right: 16upx;
			border: 2upx solid #333333;
			display: inline-block;
			box-sizing: border-box;
		}

		.icon-view {
			width: 36rpx;
			height: 36rpx;
			font-size: 18rpx;
			border-radius: 50%;
			border: 2rpx solid #333333;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;
			margin-right: 12rpx;
		}

		.icon-agree {
			// background-color: #3383fe;
			// color: #ffffff;
			border: 0rpx;
		}
		.checked-icon{
			margin-top: 8rpx;
		}

		.name-text {
			color: #3383fe;
		}
		.transparent-button{
			
		}
	}
</style>